<template>
  <div>
    <!-- 右侧内容 -->
    <div class="order-right">
      <div class="order-content">
        <div class="title">
          <h3>我的订单</h3>
        </div>
        <div class="chosetype">
          <table>
            <thead>
              <tr>
                <th width="29%">商品</th>
                <th width="31%">订单详情</th>
                <th width="13%">收货人</th>
                <th>金额</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
          </table>
        </div>
        <!-- 每一笔订单 -->
        <div class="orders">
          <table
            class="order-item"
            v-for="item in records.records"
            :key="item.id"
          >
            <thead>
              <tr>
                <th colspan="5">
                  <span class="ordertitle"
                    >{{ item.createTime }} 订单编号：{{ item.outTradeNo }}
                    <span class="pull-right delete"
                      ><img src="../images/delete.png" /></span
                  ></span>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item2, index) in item.orderDetailList"
                :key="item2.id"
              >
                <td width="60%">
                  <div class="typographic">
                    <img
                      :src="item2.imgUrl"
                      style="height: 100px; width: 100px"
                    />
                    <a href="#" class="block-text">{{ item2.skuName }}</a>
                    <span>x{{ item2.skuNum }}</span>
                    <a href="#" class="service">售后申请</a>
                  </div>
                </td>

                <td
                  :rowspan="item.orderDetailList.length"
                  width="8%"
                  class="center"
                  v-if="index === 0"
                >
                  {{ item.consignee }}
                </td>
                <td
                  :rowspan="item.orderDetailList.length"
                  width="13%"
                  class="center"
                  v-if="index === 0"
                >
                  <ul class="unstyled">
                    <li>总金额¥{{ item.totalAmount }}</li>
                    <li>在线支付</li>
                  </ul>
                </td>
                <td
                  :rowspan="item.orderDetailList.length"
                  width="8%"
                  class="center"
                  v-if="index === 0"
                >
                  <a href="#" class="btn">{{ item.orderStatusName }}</a>
                </td>
                <!-- 只需要第0个 -->
                <td
                  :rowspan="item.orderDetailList.length"
                  width="13%"
                  class="center"
                  v-if="index === 0"
                >
                  <ul class="unstyled">
                    <li>
                      <a href="mycomment.html" target="_blank">评价|晒单</a>
                    </li>
                  </ul>
                </td>
              </tr>

              <!-- <tr>
                <td width="50%">
                  <div class="typographic">
                    <img src="../images/goods.png" />
                    <a href="#" class="block-text"
                      >包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶
                      新款</a
                    >
                    <span>x1</span>
                    <a href="#" class="service">售后申请</a>
                  </div>
                </td>
              </tr> -->
            </tbody>
          </table>
        </div>
        <Pagination
          :pageNo="page"
          :pageSize="10"
          :total="records.pages"
          :continues="5"
          @getPageNo="getPageNo"
        />
      </div>
      <!--猜你喜欢-->
      <!-- <div class="like">
        <h4 class="kt">猜你喜欢</h4>
        <ul class="like-list">
          <li class="likeItem">
            <div class="p-img">
              <img src="../images/itemlike01.png" />
            </div>
            <div class="attr">
              <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
            </div>
            <div class="price">
              <em>¥</em>
              <i>3699.00</i>
            </div>
            <div class="commit">已有6人评价</div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="../images/itemlike02.png" />
            </div>
            <div class="attr">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</div>
            <div class="price">
              <em>¥</em>
              <i>4388.00</i>
            </div>
            <div class="commit">已有700人评价</div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="../images/itemlike03.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价</div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="../images/itemlike04.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价</div>
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "myOrder",
  data() {
    return {
      page: 1,
      limit: 10,
      records: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const { data: res } = await this.$api.orderAuth(this.page, this.limit);
        this.records = res;
      } catch (error) {
        console.log(error);
      }
    },
    getPageNo(e) {
      this.page = e;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.unstyled{
  padding: 0;
}
</style>